<!DOCTYPE html>
<html>
<head>
    <title>Mock.js</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="assets/img/logo-2.svg">
    <script src="http://g.tbcdn.cn/thx/brix-release/0.1.0/require-config-css-animation.js"></script>
    <script>
        require.config({
            paths: {
                mock: 'bower_components/mockjs/dist/mock'
            }
        })
        require(['mock'], function(Mock) {
            window.Mock = Mock
            window.Random = Mock.Random
        })
    </script>
    <link href="assets/css/index.css" rel="stylesheet">
    <!-- https://www.uservoice.com/ -->
</head>
<body>
    <div class="container" style="padding: 20px; margin-bottom: 20px;">
        <span class="fontsize-20">示例</span>
        <!-- <h1>Examples: Syntax Specification</h1> -->
    </div>
    <script id="template" type="x-template">
        <div class="row">
            <div class="col-sm-2">
                <div class="mb10">
                    <a href="#DPD" class="fontsize-16">数据模板定义<!-- Data Template Definition, DTD --></a>
                </div>
                <ul class="catalog">
                    <li v-for="(type, item) in DTD">
                        <div><a href="#{{ type }}">{{ type }}</a></div>
                    </li>
                </ul>
                <div class="mb10">
                    <a href="#DPD" class="fontsize-16">数据占位符定义 <!-- Data Placeholder Definition, DPD --></a>
                </div>
                <ul class="catalog">
                    <li v-for="(type, methods) in DPD">
                        <div class="mb10">
                            <a href="#{{ type }}">{{ type }}</a>
                        </div>
                        <div v-for="(method, demos) in methods">
                            <a href="#{{ method }}"> {{ method.slice(7).split('(')[0] }} </a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="col-sm-10">
                <blockquote>
                    <p>
                        <span class="specfont" style="font-size: 20px; margin-right: 10px; color: #999;">&#xe613;</span>
                        <span class="color-9">你可以打开控制台，随意地试验这些方法。</span>
                    </p>
                </blockquote>

                <div id="DTD" class="fontsize-20 mb40">数据模板定义 <!-- Data Template Definition, DTD --></div>
                <div class="definition">
                    <div v-for="(type, signatures) in DTD" class="mb40">
                        <div id="{{ type }}" class="fontsize-16 mb40">{{ type }}</div>
                        <div v-for="(signature, demos) in signatures" class="mb20">
                            <div id=""{{ signature }}"" class="fontsize-14 mb20"><code>{{ signature }}</code></div>
                            <div v-for="(index, demo) in demos" class="mb20">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="code">
                                            <span class="badge">Data Template</span>
                                            <pre><code class="javascript">Mock.mock({{ demo | json }})</code></pre>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="result">
                                            <span class="badge">Result</span>
                                            <pre><code class="javascript">{{ demo | mock | json }}</code></pre>
                                            <a href="javascript:;" class="mockicon rerun" v-on:click="rerun($event, 'dtd', demo)"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="DPD" class="fontsize-20 mb40">数据占位符定义 <!-- Data Placeholder Definition, DPD --></div>
                <div class="definition">
                    <div v-for="(type, signatures) in DPD" class="mb20">
                        <div id="{{ type }}" class="fontsize-16 mb20">{{ type }}</div>
                        <div v-for="(signature, demos) in signatures" class="mb20">
                            <div id="{{ signature }}" class="fontsize-14 mb20"><code>{{ signature }}</code></div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="code">
                                        <span class="badge">Data Template</span>
                                        <pre><code class="javascript">{{ demos.join('\n') }}</code></pre>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="result">
                                        <span class="badge">Result</span>
                                        <div v-if="signature === 'Random.dataImage( size?, text? )' ||
                                                signature === 'Random.image( size?, background?, foreground?, format?, text? )'">
                                            {{{ demos | examples.dpd.img }}}
                                        </div>
                                        <div v-else>
                                            <pre><code class="javascript">{{ demos | examples.dpd }}</code></pre>
                                            <a href="javascript:;" class="mockicon rerun" v-on:click="rerun($event, 'dpd', demos)"></a>
                                        </div>
                                        <a href="javascript:;" class="mockicon rerun" v-on:click="rerun($event, 'dpd', demos)"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
    <div id="examples" class="container definition"></div>

    <script src="./config.js"></script>
    <script>
        // require(['./assets/js/test.dtd'])
        // require(['./assets/js/test.dpd'])
        require(['./assets/js/examples'])
    </script>
    <link rel="stylesheet" href="./bower_components/highlightjs/styles/github.css"><!-- github -->

    <!-- <script src="./bower_components/highlightjs/highlight.pack.js"></script> -->
    <!-- <script src="../dist/mock.js"></script> -->

    <!-- <script src="./site.test.template.js"></script> -->
    <!-- <script src="./site.test.dtd.js"></script> -->
    <!-- <script src="./site.test.dpd.js"></script> -->
    <!-- <script>hljs.initHighlightingOnLoad();</script> -->
</body>
</html>
